<template>
  <div id="message">
    <div class="noneDate" v-if="tableData.length == 0 && isRequire">
      <div class="noneimg"><img :src="img" alt=""></div>
      <div class="tip" >暂时没有消息</div>
    </div>
    <div class="center" v-else>
      <div class="msgCon">
        <span class="msgtitle" >消息中心</span>
      </div>
      <div class="listbox">
        <div  v-bind:class="[item.is_read ? 'yikan' : 'meikan', 'list']" v-for="(item, index) in tableData" :key="index" @click="goDetail(index, item)">
          <span><i class="iconfont icon-xiaoxi"></i>{{item.title}}</span>
          <span>{{item.created_at}}</span>
        </div>
      </div>
     <!-- 表格的分页 -->
      <div class="page">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="7" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'message',
  data () {
    return {
      img: require('../assets/images/nonenews.png'),
      // true代表看过，false代表没看过
      is_read: false,
      tableData: [
      ],
      createing: '创建中',
      // 当前的索引
      activeIndex: null,
      // 是否请求过数据
      isRequire: false,
      // dialog没有u币
      noneUb: false,
      // dialog创建虚拟机
      virtual: false,
      // 创建的数据
      form: {},
      input: '',
      // 判断是否可以创建虚拟机
      chuangjian: false,
      total: null,
      page: 1
    };
  },
  mounted () {
    // 获取镜像
    this.getData();
  },
  watch: {
  },
  methods: {
    getData () {
      this.axios.get('crm/message', {
        params: {
          size: 7,
          page: this.page
        }
      })
        .then(({data}) => {
          if (data.code === 200) {
            this.tableData = data.data.data;
            this.total = data.data.total;
            this.isRequire = true;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    goDetail (index, item) {
      // 刷新页面消息通知
      this.$bus.$emit('informCount');
      this.$router.push({
        name: 'msgDetail',
        params: {
          id: item.id
        }
      });
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getData();
    }
  }
};
</script>

<style lang="scss">
  #message {
    min-width: 1200px;
    $sbcolor: #10A57D;
    $gray: #DFDFDF;
    .noneDate {
    margin-top: 230px;
    .noneimg {
      text-align: center;
      img {
        width: 194px;
        height: 140px;
      }
    }
    .tip {
      margin-top: 73px;
      margin-bottom: 280px;
      font-size: 18px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: rgba(129, 129, 129, 1);
      text-align: center;
      span {
        color: #FA520A;
        cursor: pointer;
      }
    }
  }
    .center {
      width: 1200px;
      margin: 0 auto;
      .msgCon {
        height: 82px;
        padding-bottom: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-bottom: 48px;
        border-bottom: 1px solid $gray;
        .msgtitle {
          padding-left: 16px;
          font-size:18px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(51,51,51,1);
          border-left: 7px solid $sbcolor;
        }
      }
      .listbox {
        .list {
          height:80px;
          box-sizing: border-box;
          border-bottom: 1px solid $gray;
          display: flex;
          justify-content: space-between;
          padding: 0 60px;
          align-items: center;
          &.yikan {
            color: #999999;
          }
          &.meikan {

            i {
              position: relative;
              &::after {
                content: '';
                position: absolute;
                width: 9px;
                height: 9px;
                background: red;
                border-radius: 50%;
                right: -2px;
                top: 0;
              }
            }
          }
          i {
            font-size: 20px;
            margin-right: 16px;
          }
          &:hover {
            background:rgba(244,244,244,1);
          }
        }
      }
      // 分页
      .page {
        margin-top: 38px;
        margin-bottom: 50px;
        text-align: center;
        .el-pagination.is-background .el-pager li:not(.disabled).active {
          background: #10a57d;
        }
  }
    }
  }
</style>
